<template>
  <el-main>
    <el-tabs
      tab-position="left"
      v-model="activeTab"
    >
      <el-tab-pane
        label="我上传的作品"
        name="my-song"
      >
        <el-card
          class="song"
          :body-style="{ padding: '0px' }"
          v-for="song in songs"
          :key="song"
        >
          <router-link to="/song">
            <img src="../../assets/song.jpeg" />
          </router-link>
          <div class="info">
            <div>
              歌曲{{song}}
              <el-button
                type="text"
                @click="showChangePrice"
              >修改</el-button>
            </div>
            <div class="playnum">1024</div>
          </div>
        </el-card>
      </el-tab-pane>
      <el-tab-pane
        label="我购买的歌曲"
        name="buy-song"
      >
        <el-card
          class="song"
          :body-style="{ padding: '0px' }"
          v-for="song in songs"
          :key="song"
        >
          <router-link to="/song">
            <img src="../../assets/song.jpeg" />
          </router-link>
          <div class="info">
            <div>歌曲{{song}}</div>
            <div class="playnum">1024</div>
          </div>
        </el-card>
      </el-tab-pane>
      <el-tab-pane
        label="我作品的商业授权"
        name="my-authroization"
      >
        <el-table
          :data="authes"
          border
        >
          <el-table-column
            label="编号"
            prop="id"
          ></el-table-column>
          <el-table-column
            label="歌曲"
            prop="song"
          ></el-table-column>
          <el-table-column
            label="申请人"
            prop="applyUser"
          ></el-table-column>
          <el-table-column
            label="授权价格"
            prop="applyPrice"
          ></el-table-column>
          <el-table-column
            label="授权状态"
            prop="status"
            :filters="[{ text: '已授权', value: 1 }, { text: '未授权', value: 0 }]"
            :filter-method="filterAuthStatus"
          >
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.status ? 'success' : 'danger'"
                size="small"
              >
                {{scope.row.status ? '已授权' : '未授权'}}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            prop="operation"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.status === 0">
                <el-button
                  size="mini"
                  type="success"
                  plain
                  round
                >授权</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  plain
                  round
                >拒绝</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane
        label="我购买的商业授权"
        name="buy-authroization"
      >
        <el-table
          :data="authes"
          border
        >
          <el-table-column
            label="编号"
            prop="id"
          ></el-table-column>
          <el-table-column
            label="歌曲"
            prop="song"
          ></el-table-column>
          <el-table-column
            label="授权价格"
            prop="applyPrice"
          ></el-table-column>
          <el-table-column
            label="授权状态"
            prop="status"
            :filters="[{ text: '已授权', value: 1 }, { text: '未授权', value: 0 }]"
            :filter-method="filterAuthStatus"
          >
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.status ? 'success' : 'danger'"
                size="small"
              >
                {{scope.row.status ? '已授权' : '未授权'}}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane
        label="我的收入"
        name="income"
      >
        <el-table
          :data="incomes"
          border
        >
          <el-table-column
            label="编号"
            prop="id"
          ></el-table-column>
          <el-table-column
            label="歌曲"
            prop="song"
          ></el-table-column>
          <el-table-column
            label="播放量"
            prop="playNum"
          ></el-table-column>
          <el-table-column
            label="播放收入"
            prop="playIncome"
          ></el-table-column>
          <el-table-column
            label="授权量"
            prop="authNum"
          ></el-table-column>
          <el-table-column
            label="授权收入"
            prop="money"
          ></el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane
        label="创建粉丝后援会"
        name="create-ssa"
      >
        <el-row>
          <el-col
            :span="10"
            :offset="7"
          >
            <el-card>
              <div slot="header">
                <span>创建粉丝后援会</span>
              </div>
              <el-form
                label-width="80px"
                ref="ssaForm"
                :rules="ssaFormRules"
                :model="ssaFormData"
              >
                <el-form-item
                  label="名称"
                  prop="name"
                >
                  <el-input
                    v-model="ssaFormData.name"
                    clearable
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="描述"
                  prop="description"
                >
                  <el-input
                    v-model="ssaFormData.description"
                    clearable
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button
                    type="primary"
                    :style="{ width: '100%' }"
                    @click="submitCreateSSA"
                  >创建</el-button>
                </el-form-item>
              </el-form>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane
        label="上传我的作品"
        name="upload-my-song"
      >
        <el-row>
          <el-col
            :span="14"
            :offset="5"
          >
            <el-card>
              <div slot="header">
                <span>上传个人作品</span>
              </div>
              <el-form
                label-width="120px"
                ref="uploadForm"
                :rules="uploadFormRules"
                :model="uploadFormData"
              >
                <el-form-item
                  label="名称"
                  prop="name"
                >
                  <el-input
                    v-model="uploadFormData.name"
                    clearable
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="创作者"
                  prop="creator"
                >
                  <el-input
                    v-model="uploadFormData.creator"
                    clearable
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="描述"
                  prop="description"
                >
                  <el-input
                    v-model="uploadFormData.description"
                    clearable
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="创作时间"
                  prop="createTime"
                >
                  <el-input
                    v-model="uploadFormData.createTime"
                    clearable
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="作品文件"
                  prop="file"
                >
                  <el-upload
                    action="/api/upload/singleFile"
                    :multiple="false"
                    :on-success="onUploadFileSuccess"
                  >
                    <el-button
                      type="warning"
                      size="small"
                    >点击上传</el-button>
                    <div slot="tip">上传文件不能超过 100MB.</div>
                  </el-upload>
                </el-form-item>
                <el-form-item
                  label="授权文件"
                  prop="authFile"
                >
                  <el-upload
                    action="/api/upload/singleFile"
                    :multiple="false"
                    :on-success="onUploadAuthFileSuccess"
                  >
                    <el-button
                      type="warning"
                      size="small"
                    >点击上传</el-button>
                    <div slot="tip">上传文件不能超过 10MB.</div>
                  </el-upload>
                </el-form-item>
                <el-form-item
                  label="创作人纸质授权签名照片"
                  prop="userSignFile"
                >
                  <el-upload
                    action="/api/upload/singleFile"
                    :multiple="false"
                    :on-success="onUploadUserSignFileSuccess"
                  >
                    <el-button
                      type="warning"
                      size="small"
                    >点击上传</el-button>
                    <div slot="tip">上传文件不能超过 10MB.</div>
                  </el-upload>
                </el-form-item>
                <el-form-item
                  label="作品播放单价"
                  prop="playprice"
                >
                  <el-input
                    v-model="uploadFormData.playprice"
                    type="number"
                    clearable
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="作品授权单价"
                  prop="authprice"
                >
                  <el-input
                    v-model="uploadFormData.authprice"
                    type="number"
                    clearable
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button
                    type="primary"
                    :style="{ width: '100%' }"
                    @click="submitUpload"
                  >确认提交</el-button>
                </el-form-item>
              </el-form>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
    <el-dialog
      title="修改价格"
      :visible.sync="showChangePriceDialog"
      width="400px"
    >
      <el-form
        label-width="110px"
        ref="priceForm"
        :rules="priceFormRules"
        :model="priceFormData"
      >
        <el-form-item
          label="作品播放单价"
          prop="playprice"
        >
          <el-input
            v-model="priceFormData.playprice"
            type="number"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="作品授权单价"
          prop="authprice"
        >
          <el-input
            v-model="priceFormData.authprice"
            type="number"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="warning"
            @click="submitChangePrice"
          >确认修改</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </el-main>
</template>

<script>
import { mapActions } from 'vuex';

const rand = () => Math.round(Math.random() * 100);

export default {
  name: 'Personal',
  data() {
    return {
      activeTab: 'my-song',
      songs: new Array(8).fill(1).map((it, index) => index),
      authes: new Array(8).fill(1).map(
        (it, index) => ({
          id: index,
          song: `歌曲${index}`,
          status: index % 2,
          applyUser: `申请人${index}`,
          applyPrice: rand(),
        }),
      ),
      incomes: new Array(8).fill(1).map(
        (it, index) => ({
          id: index,
          song: `歌曲${index}`,
          playNum: rand(),
          playIncome: rand(),
          authNum: rand(),
          money: rand(),
        }),
      ),
      ssaFormData: {},
      ssaFormRules: {
        name: [{ required: true, message: '请输入名称!', trigger: 'blur' }],
        description: [{ required: true, message: '请输入描述!', trigger: 'blur' }],
      },
      uploadFormData: {},
      uploadFormRules: {
        name: [{ required: true, message: '请输入名称!', trigger: 'blur' }],
        creator: [{ required: true, message: '请输入创作者!', trigger: 'blur' }],
        description: [{ required: true, message: '请输入描述!', trigger: 'blur' }],
        createTime: [{ required: true, message: '请输入作品创作时间!', trigger: 'blur' }],
        playprice: [{ required: true, message: '请输入作品播放单价!', trigger: 'blur' }],
        authprice: [{ required: true, message: '请输入作品授权单价!', trigger: 'blur' }],
      },
      showChangePriceDialog: false,
      priceFormData: {},
      priceFormRules: {
        playprice: [{ required: true, message: '请输入作品播放单价!', trigger: 'blur' }],
        authprice: [{ required: true, message: '请输入作品授权单价!', trigger: 'blur' }],
      },
    };
  },
  methods: {
    ...mapActions([
      'addSong',
    ]),
    filterAuthStatus(value, row) {
      return row.status === value;
    },
    submitCreateSSA() {
      this.$refs.ssaForm.validate((valid) => {
        if (valid) {
          this.$message.success('创建成功!');
        }
      });
    },
    submitUpload() {
      this.$refs.uploadForm.validate((valid) => {
        if (valid) {
          this.addSong(this.uploadFormData)
            .then((meta) => {
              this.$message.success(meta.msg || '上传成功!');
            })
            .catch((meta) => {
              this.$message.error(meta.msg || '上传失败!');
            });
        }
      });
    },
    showChangePrice() {
      this.showChangePriceDialog = true;
    },
    submitChangePrice() {
      this.$message.success('修改成功!');
    },
    onUploadFileSuccess(response) {
      const { meta, data } = response;
      if (meta.success && meta.code === 6666) {
        this.uploadFormData.songFilePath = data.authfilehash;
      }
    },
    onUploadAuthFileSuccess(response) {
      const { meta, data } = response;
      if (meta.success && meta.code === 6666) {
        this.uploadFormData.authfilehash = data.authfilehash;
      }
    },
    onUploadUserSignFileSuccess(response) {
      const { meta, data } = response;
      if (meta.success && meta.code === 6666) {
        this.uploadFormData.authsign = data.authfilehash;
      }
    },
  },
};
</script>

<style scoped>
.song {
  float: left;
  width: 300px;
  margin: 10px;
}

/* 卡片图 */
img {
  width: 100%;
}

/* 卡片信息 */
.info {
  padding: 5px 10px;
  position: relative;
  color: #666;
}

/* 价格 */
.info .price {
  font-size: 1.4em;
  font-weight: bolder;
  color: #f16c6c;
  text-align: center;
}

/* 播放量 */
.info .playnum {
  position: absolute;
  right: 10px;
  top: 5px;
  color: #888;
}
</style>
